<template lang="html">
  <div id="app" >
    <transition name="fade">
      <div  v-if="!hidden">
        <!--<router-view></router-view>-->
        <!--真二维码-->
        <img class="erweima-y" src="./assets/erweima.png" style="">
        <div class="footer">
          <div class="jinrLogo">
            <h4>鲸鱼</h4>
            <h5>全民安全理财</h5>
          </div>
          <a :href="download" class="dianji">点击下载送5000元</a>
        </div>
      </div>
    </transition>
    <div class="q" style="display: none" id="quchu">
      <img class="num num1" src="./assets/0.png" alt="" >
      <img class="num num2" src="./assets/1.png" alt="">
      <img class="num num3" src="./assets/2.png" alt="">
      <img class="num num4" src="./assets/3.png" alt="">
      <img class="num num1" src="./assets/4.png" alt="">
      <img class="num num2" src="./assets/5.png" alt="">
      <img class="num num3" src="./assets/6.png" alt="">
      <img class="num num3" src="./assets/7.png" alt="">
      <img class="num num4" src="./assets/8.png" alt="">
      <img class="num num4" src="./assets/9.png" alt="">
    </div>
    <div id="show"></div>
    <loader
    :loading="loading" :color="color" :size="size"
    v-if="hidden" :style="{marginTop: loadTop + 'px'}"
    :class="{oneScreen: isOneScreen}" ></loader>
    <p class="loadText" v-if="hidden">loading</p>
  </div>
</template>

<script>
  // vue相对路径不能省略，必须是以./ ../开头 ，绝对路径以/开头
  import Vue from 'vue'
  import RingLoader from 'vue-spinner/src/RingLoader.vue'
  // 引入详情页
  export default {
    name: 'app',
    data () {
      return {
        number : 10,
        hidden: true,
        topshow: false,
        hidden: true,
        color: '#000',
        size: '5rem',
        loading: true,
        loadTop: 500,
        download: 'https://www.baidu.com/',
        url1: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100',
        urlEntrance: 'http://hbjr.jinrgame.com/HunanLaohuji/index',
        isOneScreen: true,
        countImg: 0
      }
    },
    watch: {
      countImg (val,oldval) {
        if(val == 8){
            this.hidden = false
            console.log("加载完毕")
            //然后可以对后台发送一些ajax操作
        }
      }
    },
    created () {

//      this.initHttp(this.urlEntrance, {'hb_type': 'hunan'})
      this.$http.post(this.urlEntrance, {'hb_type': 'hunan'}, {emulateJSON:true}).then((response) => {  // Lambda写法
        response = response.data;
        $('#show').html(response)
        console.log(response)



      });
    },
    mounted () {
      var d1 = document.getElementById('quchu')
      var imgs = d1.querySelectorAll('img')
      Array.from(imgs).forEach((item)=>{
        let img = new Image()
        img.onload = ()=>{
          this.countImg++
        }
        img.src=item.getAttribute('src')
      })


    },
    methods:{
      // 初始化请求数据
      initHttp:  function(url, params){
        this.$http.post(url, params).then((response) => {  // Lambda写法
          response = response.data;
          $('#show').html(response)
          console.log(response)
        });
      }
  },
    // 注册组件
    components: {
      'loader': RingLoader
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import './common/style/base.styl'

#app
  position relative
  width 10rem
  margin  0 auto
  padding-top rem(42)
  background-color #64acff
  padding-bottom rem(160)
  .footer
    position fixed
    bottom 0
    left 50%
    width 10rem
    height rem(90)
    -webkit-transform translate3d(-50%,0%,0)
    transform translate3d(-50%,0%,0)
    background #fc4c60
    .jinrLogo
      float left
      height 100%
      margin-left rem(38)
      padding-left rem(90)
      background url("./assets/logo.png") no-repeat left center
      background-size rem(76) rem(76)
      color #080404
      h4
        padding-top rem(16)
        line-height rem(32)
        font-size rem(28)
      h5
        line-height rem(28)
        font-size rem(24)
        color #000000
    .dianji
      float right
      width rem(296)
      height rem(70)
      margin-right rem(24)
      margin-top rem(8)
      border-radius rem(8)
      text-align center
      line-height rem(70)
      font-size rem(28)
      font-weight bold
      background-color #ffcc21
      color #fc4c60

  .erweima-y
    position absolute;
    left 0
    bottom 0rem
    z-index 88
    width rem(430)
    border 2px red solid
    padding 3rem 0 3rem 3rem
    margin -3rem 0 3rem -3rem
    -webkit-user-select: none
    opacity 0



  .loadText
    font-size .3rem
    text-align center
    margin-top 2%
    color #03a9f4

  /* 过渡样式 fade为组件name值*/
  /**
  Enter: v-enter --> v-enter-active
  Leave: v-leave --> v-leave-active
   */
  .fade-enter-active,
  .fade-leave-active
    transition: opacity .5s
  .fade-enter,
  .fade-leave-active
    opacity 0

  .oneScreen
    height 14rem

  .v-spinner
    .v-ring1
      margin  0 auto

</style>
